

    <template>
      <div class="app-container">

      <div class="app-container__section" >
        <PlusSearch
            v-bind="getSearchBinds()"
            :columns="columns"
            v-model="searchForm"
        >

      <template #plus-field-createTime>
           <el-date-picker v-model="searchForm.timeRange" type="daterange"  />
      </template>

        </PlusSearch>
      </div>

      <div class="app-container__section">
      <PlusTable
          v-bind="getBinds()"
          :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>

        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['edutation:professional:add']"
        >新增</el-button>
        <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="gSelection.length !== 1"
            @click="handleUpdate"
            v-hasPermi="['edutation:professional:edit']"
        >修改</el-button>
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="gSelection.length === 0"
            @click="handleDelete"
            v-hasPermi="['edutation:professional:remove']"
        >删除</el-button>
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['edutation:professional:export']"
        >导出</el-button>

          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>

        <template #plus-cell-action="scope">
          <el-button link type="primary" icon="Setting" @click="$router.push(`/pro/relation?id=${scope.row.proId}`)" v-hasPermi="['edutation:professional:edit']">关联</el-button>
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"  v-hasPermi="['edutation:professional:edit']">修改</el-button>
          <el-button link type="danger" icon="Delete" @click="handleUpdate(scope.row)"  v-hasPermi="['edutation:professional:setting']">删除</el-button>
        </template>
      </PlusTable>
    </div>

      <PlusDialogForm
        ref="plusFormInstance"
        v-model:visible="dialogShow"
        v-model="formData"
        :form="{ columns,  labelWidth:'110px',  labelPosition:'right',  rules:formRules }"
        :dialog="{ title: dialogTitle, width: '540px', top: '12vh', confirmLoading }"
        @confirm="handleSubmit"
        @cancel="handleCancel"
    >

    </PlusDialogForm>


      </div>
    </template>


<script setup name="Professional">
import { listProfessionalApi, getProfessionalApi, delProfessionalApi, addProfessionalApi, updateProfessionalApi } from "@/api/edutation/professional";
import {PlusSearch, PlusTable, PlusDialogForm } from 'plus-pro-components'
import { useTablePage } from '@/hooks/useTablePage.js'
import { useActions } from '@/hooks/useActions.js'
import { getCurrentInstance,ref } from "vue"
const { proxy } = getCurrentInstance();

const primaryKey = "proId"  // 主键

// =============================================
const plusFormInstance = ref(null);
const formInstance = computed(()=>plusFormInstance.value?.formInstance)
const state = reactive({
  dialogShow:false,
  formData:{
    status: "0",
    remark: "",
    proIntroduce: "",
    proManager: "",
    proManagerPhone: "",
    proName: "",
    proCode: "",
    proManagerIntro: "",
  },
  formRules:{
    proName: [
      { required: true, message: '请输入专业名称', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 30 个字符', trigger: 'blur' }
    ],
    proCode: [
      { required: true, message: '请输入专业编码', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 30 个字符', trigger:'blur'},
    ],
    proManager: [
      { required: true, message: '请输入负责人名称', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 30 个字符', trigger: 'blur' }
    ],
  },
  confirmLoading:false,
})
const { formData, confirmLoading, formRules, dialogShow } = toRefs(state)
const isEdit = computed(() =>!!formData.value[primaryKey])
const dialogTitle = computed(() => (isEdit.value ? '编辑' : '新增')+'专业')

// =============================================
const columns = computed(()=>[
  {
    label: '专业名称',
    prop: 'proName',
    hideInSearch:false,
    hideInTable: false,
    hideInForm: false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
  },
  {
    label: '专业编码',
    prop: 'proCode',
    hideInSearch:false,
    hideInTable: false,
    hideInForm: false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },

  },
  {
      label: '专业介绍',
      prop: 'proIntroduce',
      hideInSearch:true,
      hideInTable: false,
      hideInForm: false,
      valueType:'textarea',
      tableColumnProps: {
          align: 'center'
      },

    },{
      label: '负责人',
      prop: 'proManager',
      hideInSearch:false,
      hideInTable: false,
      hideInForm: false,
      valueType:'input',
      tableColumnProps: {
          align: 'center'
      },

    },
    {
      label: '负责人介绍',
      prop: 'proManagerIntro',
      hideInSearch:true,
      hideInTable: false,
      hideInForm: false,
      valueType:'textarea',
      tableColumnProps: {
          align: 'center'
      },
    },
  {
    label: '负责人电话',
    prop: 'proManagerPhone',
    hideInSearch:false,
    hideInTable: false,
    hideInForm: false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
  },
  {
    label: '备注',
    prop: 'remark',
    hideInSearch:true,
    hideInTable: false,
    hideInForm: false,
    valueType:'textarea',
    tableColumnProps: {
      align: 'center'
    },

  },
      {
        label: '操作',
        prop: 'action',
        width: '220px',
        hideInSearch: true,
        hideInForm: true,
        tableColumnProps: {
          align: 'center',
          fixed: 'right'
        }
      }
])

    // =============================================
    // 列表请求逻辑
    const searchForm = ref({})
    const {
      gGetList,
      gSelection,
      gShowSearchForm,
      getBinds,
      getSearchBinds
    } = useTablePage(listProfessionalApi, {
      searchForm,
      beforeRequest(query){

      const { timeRange, ...rest } = query;
      const params = proxy.formatRangeTime(timeRange, undefined,'YYYY-MM-DD');
      return { ...rest, params }

      }
    })

    // 删除逻辑
    const { deleteAction } = useActions();
    function handleDelete(row) {
      deleteAction({
        api: delProfessionalApi,
        uniqueKey:primaryKey,
        selection:row[primaryKey] || gSelection.value.map(item=>item[primaryKey])
      }).then(() => {
        gGetList();
      });
    }

    // 新增操作
    const handleAdd = ()=>{
      dialogShow.value = true
    }

    // 取消按钮操作
    function handleCancel() {
      dialogShow.value = false
      formData.value = {}
      formInstance.value.resetFields();
    }

    // 确定按钮操作
    const handleSubmit = async () => {
      try {
        confirmLoading.value = true
        if (isEdit.value) {
          await updateProfessionalApi(formData.value)
          proxy.$modal.msgSuccess("修改成功")
        } else {
          await addProfessionalApi(formData.value)
          proxy.$modal.msgSuccess("新增成功")
        }
        handleCancel();
        await gGetList();
      } catch (error) {
        console.warn('提交错误:', error)
      } finally {
        confirmLoading.value = false
      }
    }

    // 修改回显数据操作
    function handleUpdate(row) {
      const key = row[primaryKey] || gSelection.value[0][primaryKey];
      getProfessionalApi(key).then(response => {
        formData.value = response.data;
        dialogShow.value = true;
      });
    }

    // 导出逻辑
    const  handleExport = () =>{
         proxy.download(
          'edutation/professional/export',
          {...searchForm.value},
          `professional_${new Date().getTime()}.xlsx`
         )
     }
    </script>

